<template>
  <div class="profile" v-loading="loading">
    <!-- 个人信息头部 -->
    <div class="profile-header">
      <div class="container">
        <div class="header-content">
          <!-- 头像和基本信息 -->
          <div class="user-info">
            <div class="avatar-section">
              <el-avatar
                :size="120"
                :src="userInfo.avatar"
                class="user-avatar"
              >
                <el-icon><User /></el-icon>
              </el-avatar>
              
              <el-button
                type="primary"
                size="small"
                class="upload-btn"
                @click="showAvatarUpload = true"
              >
                <el-icon><Camera /></el-icon>
                更换头像
              </el-button>
            </div>
            
            <div class="user-details">
              <h1 class="username">{{ userInfo.nickname || userInfo.username }}</h1>
              <div class="user-meta">
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  <span>{{ userInfo.username }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Message /></el-icon>
                  <span>{{ userInfo.email || '未绑定邮箱' }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Phone /></el-icon>
                  <span>{{ userInfo.phone || '未绑定手机' }}</span>
                </div>
                <div class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  <span>注册时间：{{ formatDate(userInfo.createdAt) }}</span>
                </div>
              </div>
              
              <div class="user-stats">
                <div class="stat-item">
                  <div class="stat-value">{{ userStats.courseCount }}</div>
                  <div class="stat-label">已学课程</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userStats.examCount }}</div>
                  <div class="stat-label">参与考试</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userStats.studyHours }}</div>
                  <div class="stat-label">学习时长(h)</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ userStats.certificateCount }}</div>
                  <div class="stat-label">获得证书</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 快捷操作 -->
          <div class="quick-actions">
            <el-button type="primary" @click="editProfile">
              <el-icon><Edit /></el-icon>
              编辑资料
            </el-button>
            <el-button @click="changePassword">
              <el-icon><Lock /></el-icon>
              修改密码
            </el-button>
            <el-button @click="accountSettings">
              <el-icon><Setting /></el-icon>
              账户设置
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="profile-content">
      <div class="container">
        <el-tabs v-model="activeTab" class="profile-tabs">
          <!-- 学习概览 -->
          <el-tab-pane label="学习概览" name="overview">
            <div class="overview-content">
              <!-- 学习进度 -->
              <div class="progress-section">
                <h3>学习进度</h3>
                <div class="progress-cards">
                  <div class="progress-card">
                    <div class="card-header">
                      <div class="card-title">本周学习</div>
                      <div class="card-value">{{ weeklyProgress.hours }}h</div>
                    </div>
                    <el-progress
                      :percentage="weeklyProgress.percentage"
                      :color="getProgressColor(weeklyProgress.percentage)"
                    />
                    <div class="card-footer">
                      目标：{{ weeklyProgress.target }}h
                    </div>
                  </div>
                  
                  <div class="progress-card">
                    <div class="card-header">
                      <div class="card-title">本月学习</div>
                      <div class="card-value">{{ monthlyProgress.hours }}h</div>
                    </div>
                    <el-progress
                      :percentage="monthlyProgress.percentage"
                      :color="getProgressColor(monthlyProgress.percentage)"
                    />
                    <div class="card-footer">
                      目标：{{ monthlyProgress.target }}h
                    </div>
                  </div>
                  
                  <div class="progress-card">
                    <div class="card-header">
                      <div class="card-title">课程完成率</div>
                      <div class="card-value">{{ courseProgress.percentage }}%</div>
                    </div>
                    <el-progress
                      :percentage="courseProgress.percentage"
                      :color="getProgressColor(courseProgress.percentage)"
                    />
                    <div class="card-footer">
                      {{ courseProgress.completed }} / {{ courseProgress.total }} 门课程
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 最近学习 -->
              <div class="recent-section">
                <h3>最近学习</h3>
                <div class="recent-courses">
                  <div
                    v-for="course in recentCourses"
                    :key="course.id"
                    class="recent-course"
                    @click="goToCourse(course.id)"
                  >
                    <div class="course-cover">
                      <img :src="course.cover" :alt="course.title" />
                      <div class="play-overlay">
                        <el-icon><VideoPlay /></el-icon>
                      </div>
                    </div>
                    
                    <div class="course-info">
                      <h4 class="course-title">{{ course.title }}</h4>
                      <div class="course-progress">
                        <el-progress
                          :percentage="course.progress"
                          :show-text="false"
                          :stroke-width="4"
                        />
                        <span class="progress-text">{{ course.progress }}%</span>
                      </div>
                      <div class="course-meta">
                        <span class="last-study">上次学习：{{ formatDate(course.lastStudyAt) }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 学习统计图表 -->
              <div class="chart-section">
                <h3>学习统计</h3>
                <div class="chart-container">
                  <div class="chart-item">
                    <h4>学习时长趋势</h4>
                    <div class="chart" ref="studyChart"></div>
                  </div>
                  
                  <div class="chart-item">
                    <h4>知识点掌握情况</h4>
                    <div class="chart" ref="knowledgeChart"></div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 我的课程 -->
          <el-tab-pane label="我的课程" name="courses">
            <div class="courses-content">
              <div class="courses-header">
                <div class="courses-filters">
                  <el-radio-group v-model="courseFilter" @change="filterCourses">
                    <el-radio-button label="all">全部课程</el-radio-button>
                    <el-radio-button label="learning">学习中</el-radio-button>
                    <el-radio-button label="completed">已完成</el-radio-button>
                    <el-radio-button label="favorite">已收藏</el-radio-button>
                  </el-radio-group>
                </div>
                
                <div class="courses-search">
                  <el-input
                    v-model="courseSearchKeyword"
                    placeholder="搜索课程"
                    @input="searchCourses"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                </div>
              </div>
              
              <div class="courses-list">
                <div
                  v-for="course in filteredCourses"
                  :key="course.id"
                  class="course-item"
                >
                  <div class="course-cover">
                    <img :src="course.cover" :alt="course.title" />
                    <div class="course-status" :class="course.status">
                      {{ getCourseStatusText(course.status) }}
                    </div>
                  </div>
                  
                  <div class="course-info">
                    <h4 class="course-title">{{ course.title }}</h4>
                    <div class="course-instructor">{{ course.instructor }}</div>
                    <div class="course-progress">
                      <el-progress
                        :percentage="course.progress"
                        :color="getProgressColor(course.progress)"
                      />
                    </div>
                    <div class="course-meta">
                      <span class="study-time">学习时长：{{ course.studyTime }}h</span>
                      <span class="last-study">上次学习：{{ formatDate(course.lastStudyAt) }}</span>
                    </div>
                  </div>
                  
                  <div class="course-actions">
                    <el-button
                      type="primary"
                      size="small"
                      @click="continueCourse(course)"
                    >
                      {{ course.progress === 100 ? '重新学习' : '继续学习' }}
                    </el-button>
                    
                    <el-dropdown trigger="click">
                      <el-button size="small" text>
                        <el-icon><MoreFilled /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="viewCourseDetail(course.id)">
                            查看详情
                          </el-dropdown-item>
                          <el-dropdown-item @click="toggleFavorite(course)">
                            {{ course.isFavorite ? '取消收藏' : '收藏课程' }}
                          </el-dropdown-item>
                          <el-dropdown-item
                            v-if="course.progress === 100"
                            @click="downloadCertificate(course.id)"
                          >
                            下载证书
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </div>
              
              <div v-if="filteredCourses.length === 0" class="empty-courses">
                <el-empty description="暂无课程" />
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 考试记录 -->
          <el-tab-pane label="考试记录" name="exams">
            <div class="exams-content">
              <div class="exams-header">
                <div class="exams-filters">
                  <el-radio-group v-model="examFilter" @change="filterExams">
                    <el-radio-button label="all">全部考试</el-radio-button>
                    <el-radio-button label="passed">已通过</el-radio-button>
                    <el-radio-button label="failed">未通过</el-radio-button>
                    <el-radio-button label="pending">待考试</el-radio-button>
                  </el-radio-group>
                </div>
                
                <div class="exams-search">
                  <el-input
                    v-model="examSearchKeyword"
                    placeholder="搜索考试"
                    @input="searchExams"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                </div>
              </div>
              
              <div class="exams-list">
                <div
                  v-for="exam in filteredExams"
                  :key="exam.id"
                  class="exam-item"
                >
                  <div class="exam-info">
                    <h4 class="exam-title">{{ exam.title }}</h4>
                    <div class="exam-meta">
                      <span class="exam-type">{{ exam.type }}</span>
                      <span class="exam-duration">时长：{{ exam.duration }}分钟</span>
                      <span class="exam-date">考试时间：{{ formatDate(exam.examDate) }}</span>
                    </div>
                  </div>
                  
                  <div class="exam-result">
                    <div v-if="exam.status === 'completed'" class="result-score">
                      <div class="score-value" :class="getScoreClass(exam.score)">
                        {{ exam.score }}
                      </div>
                      <div class="score-total">/ {{ exam.totalScore }}</div>
                      <div class="score-status" :class="getScoreClass(exam.score)">
                        {{ exam.score >= exam.passScore ? '通过' : '未通过' }}
                      </div>
                    </div>
                    
                    <div v-else-if="exam.status === 'pending'" class="result-pending">
                      <el-icon><Clock /></el-icon>
                      <span>待考试</span>
                    </div>
                    
                    <div v-else class="result-unknown">
                      <span>未参加</span>
                    </div>
                  </div>
                  
                  <div class="exam-actions">
                    <el-button
                      v-if="exam.status === 'pending'"
                      type="primary"
                      size="small"
                      @click="startExam(exam.id)"
                    >
                      开始考试
                    </el-button>
                    
                    <el-button
                      v-else-if="exam.status === 'completed'"
                      size="small"
                      @click="viewExamResult(exam.id)"
                    >
                      查看结果
                    </el-button>
                    
                    <el-button
                      v-if="exam.allowRetake && exam.status === 'completed'"
                      size="small"
                      type="warning"
                      plain
                      @click="retakeExam(exam.id)"
                    >
                      重新考试
                    </el-button>
                  </div>
                </div>
              </div>
              
              <div v-if="filteredExams.length === 0" class="empty-exams">
                <el-empty description="暂无考试记录" />
              </div>
            </div>
          </el-tab-pane>
          
          <!-- 我的证书 -->
          <el-tab-pane label="我的证书" name="certificates">
            <div class="certificates-content">
              <div class="certificates-grid">
                <div
                  v-for="certificate in certificates"
                  :key="certificate.id"
                  class="certificate-item"
                >
                  <div class="certificate-preview">
                    <img :src="certificate.preview" :alt="certificate.title" />
                    <div class="certificate-overlay">
                      <el-button
                        type="primary"
                        size="small"
                        @click="previewCertificate(certificate)"
                      >
                        预览
                      </el-button>
                      <el-button
                        size="small"
                        @click="downloadCertificate(certificate.id)"
                      >
                        下载
                      </el-button>
                    </div>
                  </div>
                  
                  <div class="certificate-info">
                    <h4 class="certificate-title">{{ certificate.title }}</h4>
                    <div class="certificate-meta">
                      <span class="certificate-type">{{ certificate.type }}</span>
                      <span class="certificate-date">获得时间：{{ formatDate(certificate.obtainedAt) }}</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div v-if="certificates.length === 0" class="empty-certificates">
                <el-empty description="暂无证书" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    <!-- 头像上传对话框 -->
    <el-dialog
      v-model="showAvatarUpload"
      title="更换头像"
      width="500px"
      :before-close="handleAvatarDialogClose"
    >
      <div class="avatar-upload">
        <el-upload
          ref="avatarUpload"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleAvatarError"
          accept="image/*"
          drag
        >
          <div class="upload-area">
            <el-icon class="upload-icon"><Plus /></el-icon>
            <div class="upload-text">
              <p>点击或拖拽图片到此处上传</p>
              <p class="upload-tip">支持 JPG、PNG 格式，文件大小不超过 2MB</p>
            </div>
          </div>
        </el-upload>
        
        <div v-if="previewAvatar" class="avatar-preview">
          <img :src="previewAvatar" alt="预览" />
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showAvatarUpload = false">取消</el-button>
        <el-button
          type="primary"
          @click="confirmAvatarUpload"
          :disabled="!previewAvatar"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 证书预览对话框 -->
    <el-dialog
      v-model="showCertificatePreview"
      :title="currentCertificate?.title"
      width="80%"
      top="5vh"
    >
      <div class="certificate-preview-content">
        <img
          v-if="currentCertificate?.preview"
          :src="currentCertificate.preview"
          :alt="currentCertificate.title"
          class="certificate-image"
        />
      </div>
      
      <template #footer>
        <el-button @click="showCertificatePreview = false">关闭</el-button>
        <el-button
          type="primary"
          @click="downloadCertificate(currentCertificate?.id)"
        >
          下载证书
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import {
  User,
  Camera,
  Message,
  Phone,
  Calendar,
  Edit,
  Lock,
  Setting,
  VideoPlay,
  Search,
  MoreFilled,
  Document,
  Clock,
  Plus
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getUserProfile,
  updateUserProfile,
  uploadAvatar,
  getUserStats,
  getUserCourses,
  getUserExams,
  getUserCertificates,
  downloadCertificate as downloadCert
} from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const userInfo = ref({})
const userStats = ref({})
const activeTab = ref('overview')

// 学习概览数据
const weeklyProgress = ref({})
const monthlyProgress = ref({})
const courseProgress = ref({})
const recentCourses = ref([])

// 课程相关
const courseFilter = ref('all')
const courseSearchKeyword = ref('')
const allCourses = ref([])

// 考试相关
const examFilter = ref('all')
const examSearchKeyword = ref('')
const allExams = ref([])

// 证书相关
const certificates = ref([])
const showCertificatePreview = ref(false)
const currentCertificate = ref(null)

// 头像上传
const showAvatarUpload = ref(false)
const previewAvatar = ref('')
const uploadUrl = ref('/api/upload/avatar')
const uploadHeaders = ref({
  Authorization: `Bearer ${userStore.token}`
})

// 计算属性
const filteredCourses = computed(() => {
  let courses = allCourses.value
  
  // 按状态筛选
  if (courseFilter.value !== 'all') {
    courses = courses.filter(course => {
      switch (courseFilter.value) {
        case 'learning':
          return course.progress > 0 && course.progress < 100
        case 'completed':
          return course.progress === 100
        case 'favorite':
          return course.isFavorite
        default:
          return true
      }
    })
  }
  
  // 按关键词搜索
  if (courseSearchKeyword.value) {
    const keyword = courseSearchKeyword.value.toLowerCase()
    courses = courses.filter(course =>
      course.title.toLowerCase().includes(keyword) ||
      course.instructor.toLowerCase().includes(keyword)
    )
  }
  
  return courses
})

const filteredExams = computed(() => {
  let exams = allExams.value
  
  // 按状态筛选
  if (examFilter.value !== 'all') {
    exams = exams.filter(exam => {
      switch (examFilter.value) {
        case 'passed':
          return exam.status === 'completed' && exam.score >= exam.passScore
        case 'failed':
          return exam.status === 'completed' && exam.score < exam.passScore
        case 'pending':
          return exam.status === 'pending'
        default:
          return true
      }
    })
  }
  
  // 按关键词搜索
  if (examSearchKeyword.value) {
    const keyword = examSearchKeyword.value.toLowerCase()
    exams = exams.filter(exam =>
      exam.title.toLowerCase().includes(keyword)
    )
  }
  
  return exams
})

// 方法
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN')
}

const getProgressColor = (percentage) => {
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#409eff'
  if (percentage >= 40) return '#e6a23c'
  return '#f56c6c'
}

const getScoreClass = (score) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

const getCourseStatusText = (status) => {
  const texts = {
    learning: '学习中',
    completed: '已完成',
    not_started: '未开始'
  }
  return texts[status] || '未知'
}

// 事件处理
const editProfile = () => {
  router.push('/profile/edit')
}

const changePassword = () => {
  router.push('/profile/password')
}

const accountSettings = () => {
  router.push('/profile/settings')
}

const goToCourse = (courseId) => {
  router.push(`/course/${courseId}`)
}

const continueCourse = (course) => {
  router.push(`/course/${course.id}/learn`)
}

const viewCourseDetail = (courseId) => {
  router.push(`/course/${courseId}`)
}

const toggleFavorite = async (course) => {
  try {
    // 调用收藏/取消收藏 API
    course.isFavorite = !course.isFavorite
    ElMessage.success(course.isFavorite ? '收藏成功' : '取消收藏成功')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const startExam = (examId) => {
  router.push(`/exam/${examId}/take`)
}

const viewExamResult = (examId) => {
  router.push(`/exam/${examId}/result`)
}

const retakeExam = async (examId) => {
  try {
    await ElMessageBox.confirm(
      '确定要重新考试吗？重新考试将覆盖当前成绩。',
      '重新考试',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    router.push(`/exam/${examId}/take`)
  } catch (error) {
    // 用户取消
  }
}

const previewCertificate = (certificate) => {
  currentCertificate.value = certificate
  showCertificatePreview.value = true
}

const downloadCertificate = async (certificateId) => {
  try {
    const response = await downloadCert(certificateId)
    
    // 创建下载链接
    const blob = new Blob([response.data], { type: 'application/pdf' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `证书-${certificateId}.pdf`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('证书下载成功')
  } catch (error) {
    ElMessage.error('证书下载失败')
  }
}

// 头像上传相关
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件！')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！')
    return false
  }
  
  // 预览图片
  const reader = new FileReader()
  reader.onload = (e) => {
    previewAvatar.value = e.target.result
  }
  reader.readAsDataURL(file)
  
  return true
}

const handleAvatarSuccess = (response) => {
  if (response.code === 200) {
    userInfo.value.avatar = response.data.url
    ElMessage.success('头像上传成功')
    showAvatarUpload.value = false
    previewAvatar.value = ''
  } else {
    ElMessage.error(response.message || '头像上传失败')
  }
}

const handleAvatarError = () => {
  ElMessage.error('头像上传失败')
}

const handleAvatarDialogClose = () => {
  previewAvatar.value = ''
}

const confirmAvatarUpload = () => {
  // 触发上传
  const uploadComponent = document.querySelector('.el-upload input')
  if (uploadComponent) {
    uploadComponent.click()
  }
}

// 筛选和搜索
const filterCourses = () => {
  // 筛选逻辑已在计算属性中实现
}

const searchCourses = () => {
  // 搜索逻辑已在计算属性中实现
}

const filterExams = () => {
  // 筛选逻辑已在计算属性中实现
}

const searchExams = () => {
  // 搜索逻辑已在计算属性中实现
}

// 绘制图表
const drawCharts = () => {
  // 这里可以使用 ECharts 绘制学习统计图表
  // 简化实现，使用模拟数据
}

// 数据加载
const loadUserProfile = async () => {
  try {
    const response = await getUserProfile()
    userInfo.value = response.data
  } catch (error) {
    ElMessage.error('加载用户信息失败')
  }
}

const loadUserStats = async () => {
  try {
    const response = await getUserStats()
    userStats.value = response.data.stats
    weeklyProgress.value = response.data.weeklyProgress
    monthlyProgress.value = response.data.monthlyProgress
    courseProgress.value = response.data.courseProgress
    recentCourses.value = response.data.recentCourses
  } catch (error) {
    ElMessage.error('加载统计数据失败')
  }
}

const loadUserCourses = async () => {
  try {
    const response = await getUserCourses()
    allCourses.value = response.data
  } catch (error) {
    ElMessage.error('加载课程数据失败')
  }
}

const loadUserExams = async () => {
  try {
    const response = await getUserExams()
    allExams.value = response.data
  } catch (error) {
    ElMessage.error('加载考试数据失败')
  }
}

const loadUserCertificates = async () => {
  try {
    const response = await getUserCertificates()
    certificates.value = response.data
  } catch (error) {
    ElMessage.error('加载证书数据失败')
  }
}

const loadAllData = async () => {
  loading.value = true
  
  try {
    await Promise.all([
      loadUserProfile(),
      loadUserStats(),
      loadUserCourses(),
      loadUserExams(),
      loadUserCertificates()
    ])
    
    // 绘制图表
    nextTick(() => {
      drawCharts()
    })
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadAllData()
})
</script>

<style lang="scss" scoped>
.profile {
  min-height: 100vh;
  background: var(--bg-color);
}

.profile-header {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  color: white;
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.header-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-xl);
  align-items: center;
}

.user-info {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

.avatar-section {
  position: relative;
  text-align: center;
  
  .user-avatar {
    border: 4px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  .upload-btn {
    margin-top: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}

.user-details {
  .username {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
  }
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-base);
  opacity: 0.9;
}

.user-stats {
  display: flex;
  gap: var(--spacing-lg);
}

.stat-item {
  text-align: center;
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-xs);
  }
  
  .stat-label {
    font-size: var(--font-size-small);
    opacity: 0.8;
  }
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.profile-content {
  padding: var(--spacing-xl) 0;
}

.profile-tabs {
  background: white;
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;
  
  :deep(.el-tabs__header) {
    margin: 0;
    background: var(--fill-color-extra-light);
    padding: 0 var(--spacing-lg);
  }
  
  :deep(.el-tabs__content) {
    padding: var(--spacing-xl);
  }
}

// 学习概览样式
.overview-content {
  h3 {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color-primary);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: var(--spacing-sm);
  }
}

.progress-section {
  margin-bottom: var(--spacing-xl);
}

.progress-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.progress-card {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    
    .card-title {
      font-weight: 600;
      color: var(--text-color-primary);
    }
    
    .card-value {
      font-size: var(--font-size-large);
      font-weight: 700;
      color: var(--primary-color);
    }
  }
  
  .card-footer {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
}

.recent-section {
  margin-bottom: var(--spacing-xl);
}

.recent-courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.recent-course {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-base);
  }
  
  .course-cover {
    position: relative;
    height: 160px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .play-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      
      .el-icon {
        font-size: 3rem;
        color: white;
      }
    }
    
    &:hover .play-overlay {
      opacity: 1;
    }
  }
  
  .course-info {
    padding: var(--spacing-md);
    
    .course-title {
      font-size: var(--font-size-medium);
      font-weight: 600;
      margin-bottom: var(--spacing-sm);
      color: var(--text-color-primary);
      @include text-ellipsis;
    }
    
    .course-progress {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-sm);
      
      .progress-text {
        font-size: var(--font-size-small);
        color: var(--text-color-secondary);
        min-width: 40px;
      }
    }
    
    .course-meta {
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
  }
}

.chart-section {
  .chart-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
  }
  
  .chart-item {
    background: var(--fill-color-extra-light);
    border-radius: var(--border-radius-base);
    padding: var(--spacing-lg);
    
    h4 {
      font-size: var(--font-size-medium);
      font-weight: 600;
      margin-bottom: var(--spacing-md);
      color: var(--text-color-primary);
    }
    
    .chart {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-color-placeholder);
    }
  }
}

// 课程列表样式
.courses-content {
  .courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-lg);
    
    .courses-search {
      width: 300px;
    }
  }
}

.courses-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.course-item {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--spacing-lg);
  align-items: center;
  
  .course-cover {
    position: relative;
    height: 120px;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .course-status {
      position: absolute;
      top: var(--spacing-sm);
      right: var(--spacing-sm);
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: var(--border-radius-small);
      font-size: var(--font-size-small);
      font-weight: 500;
      
      &.learning {
        background: var(--warning-color);
        color: white;
      }
      
      &.completed {
        background: var(--success-color);
        color: white;
      }
      
      &.not_started {
        background: var(--info-color);
        color: white;
      }
    }
  }
  
  .course-info {
    .course-title {
      font-size: var(--font-size-medium);
      font-weight: 600;
      margin-bottom: var(--spacing-sm);
      color: var(--text-color-primary);
    }
    
    .course-instructor {
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
      margin-bottom: var(--spacing-md);
    }
    
    .course-progress {
      margin-bottom: var(--spacing-md);
    }
    
    .course-meta {
      display: flex;
      gap: var(--spacing-lg);
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
    }
  }
  
  .course-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }
}

// 考试列表样式
.exams-content {
  .exams-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-lg);
    
    .exams-search {
      width: 300px;
    }
  }
}

.exams-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.exam-item {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-lg);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--spacing-lg);
  align-items: center;
  
  .exam-info {
    .exam-title {
      font-size: var(--font-size-medium);
      font-weight: 600;
      margin-bottom: var(--spacing-sm);
      color: var(--text-color-primary);
    }
    
    .exam-meta {
      display: flex;
      gap: var(--spacing-lg);
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
      
      .exam-type {
        background: var(--primary-color);
        color: white;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-small);
      }
    }
  }
  
  .exam-result {
    text-align: center;
    
    .result-score {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      
      .score-value {
        font-size: var(--font-size-large);
        font-weight: 700;
        
        &.excellent {
          color: var(--success-color);
        }
        
        &.good {
          color: var(--primary-color);
        }
        
        &.pass {
          color: var(--warning-color);
        }
        
        &.fail {
          color: var(--danger-color);
        }
      }
      
      .score-total {
        color: var(--text-color-secondary);
      }
      
      .score-status {
        margin-left: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-small);
        font-size: var(--font-size-small);
        font-weight: 500;
        
        &.excellent,
        &.good,
        &.pass {
          background: var(--success-color-light-9);
          color: var(--success-color);
        }
        
        &.fail {
          background: var(--danger-color-light-9);
          color: var(--danger-color);
        }
      }
    }
    
    .result-pending {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      color: var(--warning-color);
    }
    
    .result-unknown {
      color: var(--text-color-placeholder);
    }
  }
  
  .exam-actions {
    display: flex;
    gap: var(--spacing-sm);
  }
}

// 证书网格样式
.certificates-content {
  .certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
  }
}

.certificate-item {
  background: var(--fill-color-extra-light);
  border-radius: var(--border-radius-base);
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-base);
    
    .certificate-overlay {
      opacity: 1;
    }
  }
  
  .certificate-preview {
    position: relative;
    height: 200px;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .certificate-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
  }
  
  .certificate-info {
    padding: var(--spacing-md);
    
    .certificate-title {
      font-size: var(--font-size-medium);
      font-weight: 600;
      margin-bottom: var(--spacing-sm);
      color: var(--text-color-primary);
      @include text-ellipsis;
    }
    
    .certificate-meta {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      font-size: var(--font-size-small);
      color: var(--text-color-secondary);
      
      .certificate-type {
        background: var(--primary-color);
        color: white;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--border-radius-small);
        align-self: flex-start;
      }
    }
  }
}

// 对话框样式
.avatar-upload {
  .upload-area {
    text-align: center;
    padding: var(--spacing-xl);
    
    .upload-icon {
      font-size: 4rem;
      color: var(--text-color-placeholder);
      margin-bottom: var(--spacing-md);
    }
    
    .upload-text {
      p {
        margin: 0;
        
        &.upload-tip {
          font-size: var(--font-size-small);
          color: var(--text-color-secondary);
          margin-top: var(--spacing-sm);
        }
      }
    }
  }
  
  .avatar-preview {
    margin-top: var(--spacing-lg);
    text-align: center;
    
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--border-color);
    }
  }
}

.certificate-preview-content {
  text-align: center;
  
  .certificate-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }
}

// 空状态样式
.empty-courses,
.empty-exams,
.empty-certificates {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

// 响应式设计
@include respond-below(lg) {
  .header-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
  }
  
  .quick-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .course-item {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .exam-item {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@include respond-below(md) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .user-info {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .username {
    font-size: 2rem;
  }
  
  .progress-cards {
    grid-template-columns: 1fr;
  }
  
  .recent-courses {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    grid-template-columns: 1fr;
  }
  
  .courses-header,
  .exams-header {
    flex-direction: column;
    align-items: stretch;
    
    .courses-search,
    .exams-search {
      width: 100%;
    }
  }
  
  .certificates-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .profile-tabs {
    :deep(.el-tabs__content) {
      padding: var(--spacing-md);
    }
  }
}

@include respond-below(sm) {
  .user-meta {
    align-items: center;
  }
  
  .meta-item {
    justify-content: center;
  }
  
  .course-item {
    .course-cover {
      height: 200px;
    }
  }
  
  .exam-item {
    .exam-meta {
      flex-direction: column;
      gap: var(--spacing-sm);
      align-items: center;
    }
  }
  
  .certificates-grid {
    grid-template-columns: 1fr;
  }
}
</style>